<template>
  <div>
    <Card class="search-condition">
      <Row>
        <Form ref='pageModel' :model="pageModel" label-position="right" inline :label-width='100'>
          <Row>
            <FormItem prop="staffName" label="会员姓名">
              <Input v-model="pageModel.staffName" placeholder="请输入" clearable style="width:200px"></Input>
            </FormItem>
            <FormItem prop="certificateNo" label="会员卡号">
              <Input v-model="pageModel.certificateNo" placeholder="请输入" clearable style="width:200px"></Input>
            </FormItem>
            <FormItem prop="matchName" label="赛事名称">
              <Input v-model="pageModel.matchName" placeholder="请输入" clearable style="width:200px"></Input>
            </FormItem>
            <FormItem prop="kindCode" label="赛事类型">
              <dict code="ZGX_SSDJ" model="pageModel.kindCode" :value="pageModel.kindCode" @click="getVal" style="width:200px;margin: 5px 0"></dict>
            </FormItem>
            <FormItem prop="niandu" label="年度">
              <DatePicker type="year" v-model="pageModel.niandu" clearable placeholder="请选择" style="width:200px" @on-change="dateChange"></DatePicker>
            </FormItem>
            <FormItem prop="payStatus" label="缴费状态">
              <Select v-model="pageModel.payStatus" class="search-col" style="width:200px" clearable>
                <Option v-for="item in payStatusColums":value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
              </Select>
            </FormItem>
            <FormItem prop="retreatStatus" label="是否退费">
              <Select v-model="pageModel.retreatStatus" class="search-col" style="width:200px" clearable>
                <Option v-for="item in retreatStatusColums" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
              </Select>
            </FormItem>
            <FormItem prop="banSatus" label="是否禁赛">
              <Select v-model="pageModel.banSatus" class="search-col" style="width:200px" clearable>
                <Option v-for="item in jinsaiStatusColums" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
              </Select>
            </FormItem>
            <FormItem class="center">
              <Button @click="fetchListStart" type="primary" class="m-l-sm" icon="md-search">筛选</Button>
              <Button @click="reset" class="m-l-sm" icon="md-sync">重置</Button>
            </FormItem>
          </Row>
        </Form>
      </Row>
    </Card>
    <Card class="m-t-md">
      <Row>
        <Table :loading="loading" :columns="tableColumn" stripe border :data="tableData"></Table>
        <page-temp class="m-t-md" :total="total" :current="pageModel.pageNo" :size="pageModel.pageSize" @changePage="changePage"></page-temp>
      </Row>
    </Card>
  </div>
</template>
<script>
  import dict from '_c/dict/dict.vue';
  import dictSpan from '_c/dict/dict-span.vue';
  import {endEnrollStatus, queryListByMatchId } from '@/api/applets';
  import uploadExcel from "_c/upload/upload-excel.vue";
  import {payStatusColums,retreatStatusColums,jinsaiStatusColums}from '@/libs/util.js'

  export default {
    components: {
      dict,
      dictSpan,
      uploadExcel
    },
    data() {
      return {
        loading: true,
        total: 0,
        tableColumn: [
          {
            title: "序号",
            width: 60,
            align: "left",
            render: (h, params) => {
              return h(
                "span",
                this.pageModel.pageSize * (this.pageModel.pageNo - 1) + params.index + 1
              );
            }
          },
          {
            title: '姓名',
            key: 'staffName'
          },
          {
            title: '会员卡号',
            key: 'certificateNo',
            render:(h,params)=> {
              return h('span', params.row.certificateNo || '-');
            }
          },
          {
            title: '赛事名称',
            key: 'matchName',
            width: 200,
          },
          {
            title: '赛事类型',
            key: 'kindCode',
            render: (h, params) => {
              return h(dictSpan, {
                props: {
                  code: 'ZGX_SSDJ',
                  value: params.row.kindCode||'-'
                }
              });
            }
          },
          {
            title: '赛事时间',
            key: 'startTime',
            width: 200,
            render: (h, params) => {
              return h('span',  params.row.startTime +'至'+ params.row.endTime);
            }
          },
          {
            title: '报名时间',
            key: 'createTime',
            render: (h, params) => {
              return h('span',  this.$moment(params.row.createTime).format('YYYY-MM-DD'));
            }
          },
          {
            title: '年度',
            key: 'niandu'
          },
          {
            title: '缴费状态',
            key: 'payStatus',
            render: (h, params) => {
              return h(
                "span",
                params.row.payStatus === '1'?'已缴费':'未缴费'
              );
            }
          },
          {
            title: '是否退费',
            key: 'retreatStatus',
            render: (h, params) => {
              return h(
                "span",
                params.row.retreatStatus === '1'?'已退费':'未退费'
              );
            }
          },
          {
            title: '是否禁赛',
            key: 'banSatus',
            render: (h, params) => {
              return h(
                "span",
                params.row.banSatus === '1'?'已禁赛':'未禁赛'
              );
            },
          },
          {
            title: '报名状态',
            key: 'status',
            render: (h, params) => {
              return h('span',  params.row.status === '1'?'待审核': params.row.status === '3'?'报名成功': params.row.status === '4'?'审核未通过':'待缴费');
            }
          }
        ],
        tableData: [],
        pageModel: {
          matchName:'',
          certificateNo:'',
          // kindCode:'',
          staffName: '',
          payStatus: '',
          retreatStatus: '',
          banSatus:'',
          pageNo: 1,
          pageSize: this.$config.PAGE_SIZE
        },
        payStatusColums:payStatusColums,
        retreatStatusColums:retreatStatusColums,
        jinsaiStatusColums:jinsaiStatusColums,
      };
    },
    mounted() {
      this.query();
    },
    methods: {
      fetchListStart() {
        this.query()
      },
      reset() {
        this.$refs["pageModel"].resetFields();
        this.query()
      },
      getVal(expression) {
        let self = this;
        eval(expression);
      },
      query() {
        this.loading = true;
        queryListByMatchId(this.pageModel)
          .then(data => {
            this.total = data.count || 0;
            this.tableData = data.list || [];
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
            this.tableData = [];
            this.total = 0;
          });
      },
      changePage(pageNum) {
        this.pageModel.pageNo = pageNum;
        this.query();
      },
      close(id) {
        endEnrollStatus({matchId:id})
          .then(res => {
            this.query()
          })
      },
      dateChange(date) {
        this.pageModel.niandu = date
      }
    }
  };
</script>
<style scoped>
  .search-condition >>> span{
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
</style>
